<template>
	<view class="container position-relative">
		<view @click="toBack" class="goBack flex justify-center align-center round">
			<view class="cuIcon-back lg text-white"></view>
		</view>
		<swiper class="swiper"  disable-touch='true'>
			<swiper-item class="position-relative" v-for="(item,index) in list">
				<image v-if="!is_play" :src="baseUrl + '/static/Play.png'" mode=""
					style="position: absolute;top: calc(50% - 50rpx);right: calc(50% - 50rpx);width: 100rpx;height: 100rpx;z-index: 2000;">
				</image>
				<video :id="'index' + index" :src="item.fileUrl" :loop="true" :controls="false" class="width-sub height-sub"></video>
				<view class="s-i-fooder flex justify-between align-end padding-sm text-white">
					<view class="flex-treble">
						<view class="text-xl">
							@{{item.nickName}}
						</view>
						<view class="text-df margin-top">
							{{item.desc}}
						</view>
						<view class="text-df margin-top">
							{{item.typeName}}
						</view>
					</view>
					<view class="text-bold" style="width: 100rpx;min-width: 100rpx;">
						<view class="position-relative flex flex-direction justify-center align-center"
							@click.stop="submitAttention(item.userId)">
							<image :src="item.headImg" class="round" mode="" style="width: 100rpx;height: 100rpx;">
							</image>
							<image v-if="!item.follow" :src="baseUrl + '/static/add-good.png'" class="round" mode=""
								style="width:40rpx;height: 40rpx;position: absolute;bottom: -20rpx;"></image>
						</view>
						<view @click.stop="submitKeep(item.id)" class="flex-direction flex justify-center align-center"
							style="margin-top: 74rpx;">
							<image v-if="item.collected" :src="baseUrl + '/static/like.png'" class="round" mode=""
								style="width: 72rpx;height: 72rpx;"></image>
							<image v-else :src="baseUrl + '/static/like2.png'" class="round" mode=""
								style="width: 72rpx;height: 72rpx;"></image>
							<view class="text-sm margin-top-xs">
								{{item.collectionNum}}
							</view>
						</view>
						<view @click.stop="showModal(item.id)" class="flex-direction flex justify-center align-center"
							style="margin-top: 74rpx;">
							<image :src="baseUrl + '/static/comment2.png'" class="round" mode=""
								style="width: 72rpx;height: 72rpx;"></image>
							<view class="text-sm margin-top-xs">
								{{item.commentNum}}
							</view>
						</view>
						<view @click.stop="onShare(item.id)" class="flex-direction flex justify-center align-center"
							style="margin-top: 74rpx;">
							<image :src="baseUrl + '/static/share.png'" class="round" mode=""
								style="width: 72rpx;height: 72rpx;"></image>
							<view class="text-sm margin-top-xs">
								{{item.returnNum}}
							</view>
						</view>
					</view>
				</view>
				<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''" @click.stop="">
					<view class="cu-dialog text-white">
						<view class="cu-bar">
							<view class="action text-green"></view>
							<view class="content">
								{{total}}条评论
							</view>
							<view class="action cuIcon-close" @click.stop="hideModal"></view>
						</view>
						<scroll-view :disable-touch="true" scroll-y class="scroll-Y padding" @scrolltolower="getcomment">


							<view class="flex justify-start margin-top" v-for='(item,index) in commentList'
								:key='index'>
								<image :src="item.headImg" mode="" class="round"
									style="width: 60rpx;height: 60rpx;min-width: 60rpx;"></image>
								<view class="margin-left-xs text-left">
									<view class="text-df text-999 padding-top-xs">
										{{item.nickName}}
									</view>
									<view class="text-15 margin-top-sm">
										{{item.commentMsg ||'暂无数据'}}
									</view>

									<view class="margin-top-sm text-sm text-999">
										{{item.createTime}}
									</view>
								</view>
							</view>
							<!-- <uni-load-more :status="loading" /> -->
						</scroll-view>
						<view
							class="padding-left-sm padding-right-sm padding-bottom-xs padding-top-xs flex justify-center align-center">
							<input type="text" v-model="commentMsg" value=""
								class="f-grow1 text-15 text-left round padding-left padding-right" style="height: 70rpx;background: #1E1E1E;"
								 placeholder="写评论" />
								 <button class="bg-color text-white text-15 padding-left padding-right padding-top-xs padding-bottom-xs margin-left-sm round" @click.stop="submit_comment">发送</button>
						</view>
					</view>
				</view>
				<view @click.stop="onShare" v-if="is_share" class="flex justify-end"
					style="background: rgba(0,0,0,.5);position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 100000;">
					<image :src="baseUrl + '/static/share3.png'" mode=""
						style="width: 432rpx;height: 280rpx;margin-right: 100rpx;margin-top: 120rpx;"></image>
				</view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				pageNum: '',
				id: '',
				current: '',
				more: true,
				videoContext: '',
				baseUrl: this.$config.baseUrl,
				modalName: null,
				page: 1,
				commentList: [],
				// loading:'more',
				commentMsg: '',
				total: 0,
				is_share: false,
				// typeName: '',
				typeChildId: '',
				typeId: '',
				is_play: true,
				info:{},
				partake:false
			};
		},
		onLoad(options) {
			if (options.partake) {
				this.partake = options.partake
			}
			// if (options.typeName) {
			// 	this.typeName = options.typeName
			// }
			if (options.typeChildId) {
				this.typeChildId = options.typeChildId
			}
			if (options.typeId) {
				this.typeId = options.typeId
			}
			if (options.id) {
				this.id = options.id
				this.getList()
				this.getcomment()
			}

		},
		onShareAppMessage: function(res) {
			this.onShare()
			this.getforward()
			// if (res.from === 'button') {
			// 来自页面内转发按钮
			// console.log(res)
			// }
			return {
			      path: '/filePage/pages/program-video/program-video?partake=true&id=' + this.id  +'&typeId=' + this.typeId + '&typeChildId=' + this.typeChildId 
			    }
		},
		onShareTimeline: function() {
			this.onShare()
			this.getforward()
			return {
			      query: '/filePage/pages/program-video/program-video?partake=true&id=' + this.id  +'&typeId=' + this.typeId + '&typeChildId=' + this.typeChildId 
			    }
		},
		methods: {
			changPlay(e) {
				
				let that = this
				this.page = 1
				this.modalName = null
				this.list.forEach((item, index) => {
					if (item.id == e) {
						let ind = 'index' + index
						that.videoContext = uni.createVideoContext(ind)
						if (that.is_play) {
							that.videoContext.pause()
						} else {
							that.videoContext.play()
						}
						that.is_play = !that.is_play
					}
				})
			},
			toBack() {
				if (this.partake) {
					uni.switchTab({
						url: '/pages/businessschool/businessschool'
					})
				} else {
					uni.navigateBack()
				}
			},
			// 分享
			onShare(e) {
				if (e) this.id = e
				this.is_share = !this.is_share
			},
			async getforward(e) {
				let that = this
				const [err, res] = await this.$get(this.$api.programme_forward, {
					programmeId: this.id
				})
				if (res) {
					// this.info = res.data
					// console.log(res.data)
					this.list.forEach((item, index) => {
						if (index == that.current) {
							item.returnNum = Number(item.returnNum) + 1
						}
					})
				}
			},
			// async getDetail() {
			// 	let that = this
			// 	const [err, res] = await this.$get(this.$api.programme_detail, {
			// 		programmeId: this.id
			// 	})
			// 	if (res) {
			// 		// console.log(res)
			// 		this.info = res.data
			// 		this.list.push(res.data)
			// 		// this.list = this.list.concat(res.data.list)
			// 		// if (res.data.list.length == 0) {
			// 		// 	this.more = false
			// 		// }
			// 		// console.log('333333333333333' + this.list)
			// 		this.list.forEach((item, index) => {
			// 			if (item.id == this.id) {
			// 				that.current = index
			// 				let ind = 'index' + index
			// 				that.videoContext = uni.createVideoContext(ind)
			// 				that.videoContext.play()
			// 			}
			// 		})
			// 	}
			// },
			async getList() {
				let that = this
				const [err, res] = await this.$get(this.$api.programme_allVideoList, {
					typeId: this.typeId,
					secondTypeId: this.typeChildId
				})
				if (res) {
					console.log(res)
					// this.list = this.list.concat(res.data.list)
					// this.list.push(res.data)
					this.list = res.data
					// if (res.data.list.length == 0) {
					// 	this.more = false
					// }
					console.log('333333333333333' + this.list)
					this.list.forEach((item, index) => {
						if (item.id == this.id) {
							that.current = index
							let ind = 'index' + index
							that.videoContext = uni.createVideoContext(ind)
							that.videoContext.play()
						}
						if(item.payStatus == 0 ) that.list.splice(index, 1)
					})
				}
			},
			showModal(e) {
				this.id = e
				this.modalName = 'bottomModal'
				this.page = 1
				this.commentList = []
				this.getcomment()
			},
			hideModal() {
				this.page = 1
				this.modalName = null
			},
			async getcomment() {
				let that = this
				const [err, res] = await this.$get(this.$api.comment_list, {
					pageNum: this.page,
					pageSize: 10,
					videoId: this.id,
					type: 2
				})
				if (res) {
					// console.log(res)
					this.total = res.data.total
					this.commentList = this.commentList.concat(res.data.list)
					if (res.data.list.length == 0) {
						// this.loading = 'noMore';
					} else {
						// this.loading = 'more'
						this.page++
					}
				}
			},
			async submit_comment() {
				let that = this
				if(!this.commentMsg) return
				uni.showLoading({
					title: '正在发布',
					mask: true
				});
				const [err, res] = await this.$post(this.$api.comment_add, {
					commentMsg: this.commentMsg,
					parentId: 0,
					type: 2,
					videoId: this.id
				})
				if (res) {
					uni.hideLoading();
					this.$util.msg(res.message)
					this.list.forEach((item, index) => {
						if (item.id == that.id) {
						       item.commentNum ++
						} 
					})
					this.page = 1
					this.commentMsg = ''
					this.commentList = []
					this.getcomment()
					// console.log(res)
				}
			},
			animationfinish(e) {
			
				let that = this
				this.hideModal()
				this.total = 0
				this.is_play = true
				// if (e.detail.current == (this.list.length - 1) && this.more) {
				// 	console.log(e.detail.current)
				// 	this.pageNum++
				// 	this.getList()
				// }
				// console.log('11111111' + this.list)
				this.list.forEach((item, index) => {
					let ind = 'index' + index
					that.videoContext = uni.createVideoContext(ind)
					if (index == e.detail.current) {
						that.videoContext.play()
					} else {
						that.videoContext.stop()
					}
				})
				this.page = 1
				this.commentList = []
				this.getcomment()
			},
			async submitKeep(videoId) {
				let that = this
				const [err, res] = await this.$get(this.$api.programme_collection, {
					programmeId: videoId
				})
				if (res) {
					// console.log(res)
					this.$util.msg(res.message)
					this.list.forEach((item, index) => {
						if (index == that.current) {
							if (item.collected == 1) {
								item.collected = 0
								item.collectionNum = Number(item.collectionNum) - 1
							} else {
								item.collected = 1
								item.collectionNum = Number(item.collectionNum) + 1
							}

						}
					})
				}
			},
			async submitAttention(followId) {
				let that = this
				const [err, res] = await this.$get(this.$api.follow_addOrDel, {
					followId: followId,
					type: 2
				})
				if (res) {
					this.$util.msg(res.data)
					this.list.forEach((item, index) => {
						if (index == that.current) {
							if (item.follow == 1) {
								item.follow = 0
							} else {
								item.follow = 1
							}

						}
					})
					// console.log(res)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.goBack {
		width: 64rpx;
		height: 64rpx;
		position: fixed;
		top: 50rpx;
		left: 20rpx;
		z-index: 99;
		background: rgba(0, 0, 0, .5);
	}

	.swiper {
		width: 100vw;
		height: 100vh;

		.s-i-fooder {
			position: fixed;
			bottom: 98rpx;
			left: 0;
			right: 0;
		}
	}

	.cu-bar {
		background-color: #1E1E1E;
	}

	.scroll-Y {
		height: 784rpx;
		background-color: #1E1E1E;
	}

	.cu-dialog {
		background-color: #000;
	}
</style>
